<template>
	<view class="wrap">
		
		
		<view class="ipt-wrap">
			<view class="label">
				原手机号
			</view>
			<view class="right" style="color:#808080">
				 {{oldphone}}
			</view>
			
		</view>
		<view class="ipt-wrap">
			<view class="label">
				验证码
			</view>
			<view class="right">
				 <input v-model="code"  type="text" placeholder="请输入手机验证码" />
			</view>
			<view class="get-code" @click="getCode">
				{{btntip}}
			</view>
		</view>
		<view class="ipt-wrap">
			<view class="label">
				新手机号
			</view>
			<view class="right">
				 <input v-model="phone"  type="text" placeholder="请输入新手机号" />
			</view>
			
		</view>
		
		<view class="ipt-wrap">
			<view class="label">
				验证码
			</view>
			<view class="right">
				 <input v-model="code2"  type="text" placeholder="请输入手机验证码" />
			</view>
			<view class="get-code" @click="getCode2">
				{{btntip2}}
			</view>
		</view>
		<view class="next" @click="subData">
			保存
		</view>
		<!-- <view class="forget">
			<text>忘记密码？</text>
		</view> -->
	</view>
</template>


<script>
	export default {
		data() {
			return {
				oldphone:'',
				btntip: '获取验证码',
				btntip2:'获取验证码',
				phone:'',
				timer:null,
				timer2:null,
				time:59,
				code:'',
				time2:59,
				code2:'',
				money_pwd:'',
				repeat_money_pwd:''
			}
		},
		onLoad() {
             this.geData()  
		},
		methods: {
			geData(){
				let that=this
				that.apiget('/api/user/get_username').then(res => {
					if(res.Code==10200){
						
						that.oldphone=res.Data
					}
					
				}).catch(err=>{
					console.log(err)
				});
			},
			subData(){
				let that=this
				
				if(this.phone==''){
					uni.showToast({
					    title: '请输入新手机号',
					    duration:4000,
						icon:'none'
					});
					return
				}
				
			    if(this.code==''){
			    	uni.showToast({
			    	    title: '请输入原手机验证码',
			    	    duration:4000,
			    		icon:'none'
			    	});
			    	return
			    }
				if(this.code2==''){
					uni.showToast({
					    title: '请输入旧手机验证码',
					    duration:4000,
						icon:'none'
					});
					return
				}
				
				
				
				
				that.apipost('/api/user/change_username',{
					new_username:that.phone,
					
					old_code:that.code,
					new_code:that.code2
				},true).then(res => {
					if(res.Code==10200){
						
						uni.showToast({
						    title: res.Message,
						    duration:4000,
							icon:'none'
						});
						uni.navigateBack();
					}
					
				}).catch(err=>{
					console.log(err)
				});
			},
			getCode2(){
				let that=this
				if(this.phone==''){
					uni.showToast({
					    title: '请输入新手机号',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(that.time2!=59){
					return
				}
				that.timer2=setInterval(function(){
					if(that.time2==1){
						that.btntip2='获取验证码'
						clearInterval(that.timer2)
						that.time2=59
					}else{
						that.btntip2=--that.time2+'s后获取'
					}
					
				},1000)
				
				that.apiget('/api/auth/SendMobileMsg',{
					phone:that.phone,
					
				},true).then(res => {
					if(res.Code==10200){
						uni.showToast({
						    title: res.Message,
						    duration:4000,
							icon:'none'
						});
						
					}
					
				}).catch(err=>{
					console.log(err)
				});
			},
			getCode(){
				let that=this
				
				if(that.time!=59){
					return
				}
				that.timer=setInterval(function(){
					if(that.time==1){
						that.btntip='获取验证码'
						clearInterval(that.timer)
						that.time=59
					}else{
						that.btntip=--that.time+'s后获取'
					}
					
				},1000)
				
				that.apiget('/api/auth/SendMobileMsg',{
					phone:that.oldphone,
					
				},true).then(res => {
					if(res.Code==10200){
						uni.showToast({
						    title: res.Message,
						    duration:4000,
							icon:'none'
						});
						
					}
					
				}).catch(err=>{
					console.log(err)
				});
			}
		}
	}
</script>

<style>
	.forget{
		display:flex;
		justify-content: flex-end;
		padding-top:20rpx;
		color:#1380db;
		width:668rpx;
		margin:0 auto;
	}
	.next{
		
		background:#f9436b;
		color:#fff;
		width:668rpx;
		margin:0 auto;
		display:flex;
		justify-content: center;
		align-items: center;
		height:80rpx;
		margin-top:60rpx;
		border-radius:12rpx;
	}
	.ipt-wrap .label{
		width:140rpx;
	}
	.ipt-wrap .right{
		flex:1;
	}
	.right input{
		height:100%;
	}
	.ipt-wrap{
		display:flex;
		align-items: center;
		width:604rpx;
		margin:0 auto;
		
		padding:36rpx 0;
		border-bottom:1rpx solid #e8e8e8
	}

	/* .name-wrap{
		border-bottom:1rpx solid #e8e8e8
	} */
	.wrap{
		background:#fff;
		min-height:100%;
	}
	.tips{
		color:#333;
		line-height:70rpx;
		background:#eeeeee;
		padding:34rpx 44rpx 34rpx 30rpx;
	}
</style>
